<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-04-27 10:37:03
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-05-13 16:27:45
 * @FilePath: /XMate-h5/src/views/messageCenter/messageDetail/msgDetailCell.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="py-3 custom-scrollbar text-sm">
    <h5 class="text-[#8C8C8C] text-sm mb-2">{{ formattedTime }}</h5>
    <div class="gradient-card rounded-[8px]">
      <!-- 内容区域 -->
      <div class="gradient-content rounded-[7px] p-4">
        <!-- 标题和时间 -->
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center gap-2">
            <!-- <van-icon name="notes-o" class="text-[#722ED1]" /> -->
            <img src="@/icons/svg/msgCenter/ai_icon.svg" class="w-4" />
            <span
              class="font-medium bg-gradient-to-br from-[#1D65FF] to-[#6D1BFF] bg-clip-text text-transparent inline-block"
              >{{ title }}</span
            >
          </div>
          <span class="text-sm text-[#8C8C8C]"></span>
        </div>

        <!-- 内容 -->
        <p class="text-sm text-[#262626] leading-6 custom-scrollbar">
          {{ item.content }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore
import { MsgDetailResponse, MsgModel } from "@/services/msgCenter/type";
import { computed } from "vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";

interface Props {
  title?: string;
  item: MsgModel;
}

const props = withDefaults(defineProps<Props>(), {
  title: "总结",
});

const formattedTime = computed(() => {
  const createdTime = dayjs(props.item.createdTime);
  const now = dayjs();
  const diffMinutes = now.diff(createdTime, "minute");

  // 计算"xx分钟前"
  let timeAgo;
  if (diffMinutes === 0) {
    timeAgo = "刚刚";
  } else if (diffMinutes < 60) {
    timeAgo = `${diffMinutes}分钟前`;
  } else if (diffMinutes < 60 * 24) {
    timeAgo = `${Math.floor(diffMinutes / 60)}小时前`;
  } else {
    timeAgo = `${Math.floor(diffMinutes / (60 * 24))}天前`;
  }

  // 格式化具体时间
  const specificTime = createdTime.format("HH:mm");

  return `${timeAgo} · ${specificTime}生成`;
});
</script>

<style scoped>
.gradient-card {
  position: relative;
  background: linear-gradient(to right, #f5f0ff, #f0f7ff);
}

.gradient-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(to right, #6323ff, #0d93f1);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
}

/* 自定义滚动条样式 */
.custom-scrollbar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(109, 27, 255, 0.3) transparent; /* Firefox */
}

/* Webkit browsers (Chrome, Safari) */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #6d1bff, #1d65ff);
  border-radius: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #8545ff, #4785ff);
}
</style>
